---
import MainLayout from '../../layouts/MainLayout.astro';
import path from 'path';
import { execSync } from 'child_process';
import Convert from 'ansi-to-html';
import { compareSync } from "dir-compare";
import { featuresDirs } from '../../config';
import Window from '../../components/Window/Window.astro';

// Generate pages present in SIDEBAR
//
export function getStaticPaths() {
  return featuresDirs.map(f => ({params: {feature: f}}));
}

const { feature } = Astro.params;

// Loading the feature description
// (this loading is complex because it's a dynamic import)
//
const content = (await Astro.glob('../../../public/features/*/index.md')).find(m => m.file === path.resolve(`public/features/${feature}/index.md`));

// Setup paths
//
const root = `public/features/${feature}`
const packed = `${root}/packed`
const source = `${root}/source`

// Clean and run pack
//
execSync(`rm -fr ${packed} && mkdir ${packed}`);
execSync(`cp -r ${source}/* ${packed}`);
const result = execSync(`node ../../../../../dist/index.js ./packed ${content.frontmatter.jampack}`, { cwd: root , env: { ...process.env, FORCE_COLOR: "1" }});
const resultHtml = new Convert().toHtml(result.toString().trim());

// Compare dirs
//
const dirCompare = compareSync(source, packed, { compareContent: true, compareSize: true });

// iframe URLs
//
const iframeSource = `/features/${feature}/source/index.html`;
const iframePacked = `/features/${feature}/packed/index.html`;
---
<MainLayout frontmatter={{ title: content.frontmatter.title, description: content.frontmatter.description, layout: undefined}} headings={content.getHeadings()}>

  <section set:html={ content.compiledContent() }>
  </section>

  <h2>Demo</h2>
  
  <div class="files files-horizontal">
    <h3>SOURCE</h3>
    <span></span>
    <span></span>
    <h3>JAMPACKED</h3>
    <span></span>

    { dirCompare.diffSet.map( l => {
      return (
        <span class={ `color-${l.state} col-file is-${l.type1}` } style={ `padding-left: ${l.level*1.3}rem;` }>{ l.name1 }</span>
        <span class={ `color-${l.state} col-size` }>{ l.type1 === 'file' ? l.size1 : '' }</span>
        <span class={ `color-${l.state}` }></span>
        <span class={ `color-${l.state} col-file is-${l.type2}` } style={ `padding-left: ${l.level*1.3}rem;` }>{ l.name2 }</span>
        <span class={ `color-${l.state} col-size` }>{ l.type2 === 'file' ? l.size2 : '' }</span>
        )
      })
    }
  </div>

  <div class="files files-vertical">
    <h3>SOURCE</h3>

    <ul>
      { dirCompare.diffSet.map( l => {
      return l.type1 !== 'missing' ?
        ( <li>
            <span class={ `col-file is-${l.type1}` } style={ `padding-left: ${l.level*1.3}rem; flex:1;` }>{ l.name1 }</span>
            <span class={ `col-size` }>{ l.type1 === 'file' ? l.size1 : '' }</span>
          </li>
        ) : <></>
      })
    }
    </ul>
  </div>

  <div class="files files-vertical">
    <h3>JAMPACKED</h3>

    <ul>
      { dirCompare.diffSet.map( l => {
      return l.type2 !== 'missing' ?
        ( <li>
            <span class={ `color-${l.state} col-file is-${l.type2}` } style={ `padding-left: ${l.level*1.3}rem; flex:1;` }>{ l.name2 }</span>
            <span class={ `color-${l.state} col-size` }>{ l.type2 === 'file' ? l.size2 : '' }</span>
          </li>
        ) : <></>
      })
    }
    </ul>
  </div>

  <div class="browsers">
    <Window title="Source" open_url={iframeSource}>
      <div class="iframe-shrinker">
        <iframe style="width: 100%; height: 100%;" src={iframeSource}></iframe>
      </div>
    </Window>
    <Window title="Jampacked" open_url={iframePacked}>
      <div class="iframe-shrinker">
        <iframe style="width: 100%; height: 100%;" src={iframePacked}></iframe>
      </div>
    </Window>
  </div>

  <Window title="Terminal">
    <pre id="terminal" set:html={ resultHtml }>
    </pre>
  </Window>
</MainLayout>

<script>
  // Scroll the terminal to the end automatically
  var terminalElement = document.getElementById("terminal");
  terminalElement.scrollTop = terminalElement.scrollHeight;
</script>

<style lang="scss" scoped>
  .browsers {
    display: none;
  }

  .files {
    color: white;
    font-family: var(--font-mono);
    font-size: 0.85em;
    background-color: black;
    padding: 1rem 1rem;
    border-radius: 6px;

    h3 {
      padding: 0;
      margin: 0;
      margin-bottom: 0.7rem;
      font-size: inherit;
      text-decoration: underline;
    }

    .color-equal {
      opacity: 0.6;
    }

    .color-distinct {
      color: gold;
    }

    .color-right {
      color: greenyellow;
    }

    .color-left {
      color: red;
    }

    .col-size {
      justify-self: right;
    }

    .is-directory {
      font-weight: bold;

      &::before {
        content: "📁 "
      }
    }

    ul {
      padding: 0;
      margin: 0;
      list-style-type: none;

      li {
        margin-top: 4px;
      }
    }
  }

  .files-horizontal {
    display: none;
  }

  @media (min-width: 40em) {
    .files-horizontal {
      display: grid;
      grid-template-columns: 1fr min-content 3rem 1fr min-content;
    }

    .files-vertical {
      display: none;
    }

    .browsers {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 300px;
      gap: 1rem;
    }
  }

  .files-vertical {
    ul > li {
      display: flex;
    }
  }

  .iframe-shrinker {
    width: 200%;
    height: 200%;
    transform-origin: 0 0;
    transform: scale(0.5);
  }

  #terminal {
    --padding-inline: 0;
    box-sizing: border-box;
    background-color: black;
    overflow-y: auto;
    font-size: 0.85em;
    padding: 1rem 1rem;
  }


</style>
